import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'app-customize',
  templateUrl: './customize.component.html',
  styles: [`
    .container {
      display: flex;
      align-items: center;
    }
    .container .slider {
      width: 100%;
      margin-right: 0.39rem;
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomizeComponent {
  val;
  lines = [];
  points = [];
  realVal;
  timeValue = new Date();

  ngOnInit() {
    this.lines = [
      {
        value: [14400, 21600],
        style: {
          'background-color': '#2673e5'
        }
      },
      {
        value: [43200, 72000],
        style: {
          'background-color': '#2673e5'
        }
      }
    ];
    this.points = [
      {
        value: this.calculatePoint(0),
        label: '00:00:00'
      },
      {
        value: this.calculatePoint(1),
        label: '04:00:00',
        pointStyle: {
          'border-color': '#2673e5'
        }
      },
      {
        value: this.calculatePoint(2),
        label: '08:00:00',
        textStyle: {
          color: '#2673e5'
        }
      },
      {
        value: this.calculatePoint(3),
        label: '12:00:00',
        pointStyle: {
          'border-color': '#2673e5',
          'border-radius': '0'
        },
        textStyle: {
          color: '#2673e5',
          'font-size': '16px'
        }
      },
      {
        value: this.calculatePoint(4),
        label: '16:00:00'
      },
      {
        value: this.calculatePoint(5),
        label: '20:00:00'
      },
      {
        value: this.calculatePoint(6),
        label: '24:00:00'
      }
    ];
  }

  calculatePoint(index) {
    return 3600 * 4 * index;
  }

  //value与时间换算
  valToTime(val) {
    const time = val;
    const min = Math.floor(time % 3600);
    return this.formatTime(Math.floor(time / 3600)) + ':' + this.formatTime(Math.floor(min / 60)) + ':' + this.formatTime(time % 60);
  }

  valToDatetime(val) {
    let date = new Date();
    let arr = val.split(':');
    const currentHours = arr[0];
    const currentMinutes = arr[1];
    const currentSeconds = arr[2];
    date.setHours(Number(currentHours));
    date.setMinutes(Number(currentMinutes));
    date.setSeconds(Number(currentSeconds));
    return date;
  }

  formatTime(time) {
    if (time < 10) {
      return '0' + time;
    } else {
      return time;
    }
  }

  onSlideEnd = event => console.log('slideEnd', event);
  // slider值改变时触发事件
  onChange = event => {
    this.realVal = this.valToTime(this.val);
    this.timeValue = this.valToDatetime(this.realVal); //转换成时间组件能显示的时间格式
  };

  // 时分秒改变
  timeChange(realVal) {
    if (!realVal) {
      return;
    }
    const time = realVal.getHours() * 3600 + realVal.getMinutes() * 60 + realVal.getSeconds();
    this.val = time;
  }
}
